<template>
  <div class="search-section" style="position: relative">
    <div class="bgFFF color000 mb12 bdradius4">
      <div style="position: relative">
        <div class="color000">
          <Card dis-hover class="criteria">
            <div ref="cardSearchBox" class="example-code ivu-col">
              <Form
                :model="pageData"
                :label-width="66"
                label-position="left"
                inline
              >
                <Row class="search-input">
<!--                  <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}">
                    <FormItem label="选择年份">
                      <DatePicker
                        v-model="pickDate"
                        type="year"
                        clearable
                        placeholder="请选择年份"
                        format="yyyy"
                        @on-change="handleDaterangeInput"
                        :transfer="true"
                        :editable="false"
                        :style="styles"
                      ></DatePicker>
                    </FormItem>
                  </Col>-->
                  <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}">
                    <FormItem label="选择单位">
                      <Cascader
                        placeholder="请选择单位"
                        :data="deptListData"
                        v-model="areaId"
                        change-on-select
                        @on-change="cascaderChange"></Cascader>
                    </FormItem>
                  </Col>
                  <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}">
                    <Button
                      class="mr20"
                      icon="ios-search"
                      type="primary"
                      @click="onSearch()"
                    >搜索
                    </Button>
                    <Button @click="onReset()">重置</Button>
                  </Col>
                </Row>
              </Form>
            </div>
          </Card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      deptListData: [],
      // pickDate: "",
      areaId: [],
      pageData: {},
    };
  },
  computed: {
    styles() {
      let width = this.width || 100;
      return {
        width: width <= 100 ? `${width}%` : `${width}px`,
      };
    },
  },
  created() {
    //  缴费年份 默认选中明年
    // let date = new Date().getFullYear() + 1;
    // this.pickDate = new Date(Date.parse(date));
    // this.pageData.orderYear = date;

    this.getDeptList();
  },
  watch: {},
  methods: {
    getDeptList() {
      this.APIS.departmentListRole().then((res) => {
        if (res.code == 20000) {
          this.deptListData = this.dataProcessing(res.data);
        } else {
          this.$Message.error(res.message);
        }
      })
    },
    handleDaterangeInput(data) {
      this.pageData.orderYear = data;
      if (this.pageData.orderYear == "") {
        this.$emit("onSearch", this.pageData);
      }
    },
    // 下拉框树结构数据处理
    dataProcessing(data) {
      data.forEach((item) => {
        item["label"] = item.deptName;
        item["value"] = item.qywechatDeptId.toString();
        if (item.children.length > 0) {
          this.dataProcessing(item.children);
        }
      });
      return data;
    },
    cascaderChange(data) {
      if (data.length) {
        this.pageData.areaId = data[data.length - 1];
      } else {
        this.pageData.areaId = "";
        this.$emit("onSearch", this.pageData);
      }
    },
    onSearch() {
      this.$emit("onSearch", this.pageData);
    },
    onReset() {
      //  缴费年份 默认选中明年
      // let date = new Date().getFullYear() + 1;
      // this.pickDate = new Date(Date.parse(date));
      // this.pageData = {
      //   orderYear: date
      // }
      this.pageData = {};
      this.areaId = [];
      this.$emit("onSearch", this.pageData);
    },
  },
};
</script>
<style lang="less" scoped>
</style>
